<!DOCTYPE html>
<meta charset="utf-8">
<title>Test &lt;details&gt; element</title>
<link href="fiks.html.css" rel="stylesheet">
<script src="fiks.html.js"></script>
<body>

<h1>Test the &lt;details&gt; element</h1>
<div>
  <details>
    <summary>HTML 5 is awesome</summary>
    <div>
      <p>The details are pretty complicated. Are you sure you want to know them?</p>
      <ul>
        <li>Opera and Firefox work the best with details.</li>
        <li>Safari and Chrome are almost there, but won't recalculate styles based on attributes, so needed a "class" hack.</li>
        <li>Konqueror has a recalculating problem too, but it's more complicated and buggy,
            so I had to do the same for it as IE6 when expanding/contracting.</li>
        <li>Firefox 2.x won't work, don't even try.</li>
        <li>IE 6-8 was a pain, but it works.</li>
      </ul>
      <details>
        <summary>Nested Details</summary>
        <div>
          <p>You know, it really is so much easier now that we use summary instead of legend.</p>
        </div>
      </details>
    </div>
  </details>
  <details open>
    <summary>Open Details</summary>
    <div>
      <p>These details are open for the viewing.</p>
    </div>
  </details>

  <p>I have implemented HTML 5 in t3h browserz!!!1 OK, OK, I know that was lame.</p>
</div>
